<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-white px-4">
    <!-- Logo区域 -->
    <div class="mb-12 text-center">
      <div class="text-5xl mb-2">🍎</div>
      <h1 class="text-3xl font-light text-gray-800">欢迎回来</h1>
      <p class="mt-2 text-sm text-gray-500">登录以继续使用全部功能</p>
    </div>

    <!-- 登录表单 -->
    <div class="w-full max-w-sm">
      <form @submit.prevent="handleSubmit" class="space-y-6">
        <!-- 用户名输入框 -->
        <div class="space-y-2">
          <input id="account" v-model="loginForm.account" type="text" required @blur="validateAccount"
            @input="validateAccount"
            class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-gray-300 focus:ring-0 transition-colors bg-gray-50 text-gray-800"
            :class="{ 'border-red-300 bg-red-50': errors.account }" placeholder="用户名或邮箱" autocomplete="username" />
          <p v-if="errors.account" class="text-sm text-red-500 mt-1">{{ errors.account }}</p>
        </div>

        <!-- 密码输入框 -->
        <div class="space-y-2">
          <div class="relative">
            <input id="password" v-model="loginForm.password" :type="showPassword ? 'text' : 'password'" required
              @blur="validatePassword" @input="validatePassword"
              class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-gray-300 focus:ring-0 transition-colors bg-gray-50 text-gray-800"
              :class="{ 'border-red-300 bg-red-50': errors.password }" placeholder="密码"
              autocomplete="current-password" />
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
              <el-icon class="cursor-pointer text-gray-400 hover:text-gray-600" @click="showPassword = !showPassword">
                <View v-if="showPassword" />
                <Hide v-else />
              </el-icon>
            </div>
          </div>
          <p v-if="errors.password" class="text-sm text-red-500 mt-1">{{ errors.password }}</p>
        </div>

        <!-- 记住我和忘记密码 -->
        <div class="flex items-center justify-between text-sm">
          <label class="flex items-center text-gray-600">
            <input v-model="loginForm.remember" type="checkbox"
              class="w-4 h-4 rounded border-gray-300 text-blue-500 focus:ring-blue-500" />
            <span class="ml-2">记住我</span>
          </label>
          <a href="#" class="text-blue-500 hover:text-blue-600 transition-colors">忘记密码？</a>
        </div>

        <!-- 登录按钮 -->
        <button type="submit" :disabled="loading || !isFormValid"
          class="w-full bg-black hover:bg-gray-800 text-white font-medium py-3 px-4 rounded-xl transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
          {{ loading ? "登录中..." : "登录" }}
        </button>

        <!-- 第三方登录 -->
        <div class="relative my-8">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-100"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-6 py-2 bg-white text-gray-400 text-xs uppercase tracking-wider">其他登录方式</span>
          </div>
        </div>

        <!-- 第三方登录按钮 -->
        <div class="flex justify-center space-x-6">
          <!-- 谷歌登录 -->
          <button type="button"
            class="p-2.5 rounded-full hover:bg-gray-100 active:bg-gray-200 transition-all duration-200 transform hover:scale-110 group">
            <svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M21.8055 10.0415H21V10H12V14H17.6515C16.827 16.3285 14.6115 18 12 18C8.6865 18 6 15.3135 6 12C6 8.6865 8.6865 6 12 6C13.5295 6 14.921 6.577 15.9805 7.5195L18.809 4.691C17.023 3.0265 14.634 2 12 2C6.4775 2 2 6.4775 2 12C2 17.5225 6.4775 22 12 22C17.5225 22 22 17.5225 22 12C22 11.3295 21.931 10.675 21.8055 10.0415Z"
                fill="#FFC107" />
              <path
                d="M3.15302 7.3455L6.43852 9.755C7.32752 7.554 9.48052 6 12 6C13.5295 6 14.921 6.577 15.9805 7.5195L18.809 4.691C17.023 3.0265 14.634 2 12 2C8.15902 2 4.82802 4.1685 3.15302 7.3455Z"
                fill="#FF3D00" />
              <path
                d="M12 22C14.583 22 16.93 21.0115 18.7045 19.404L15.6095 16.785C14.5718 17.5742 13.3038 18.001 12 18C9.39897 18 7.19047 16.3415 6.35847 14.027L3.09747 16.5395C4.75247 19.778 8.11347 22 12 22Z"
                fill="#4CAF50" />
              <path
                d="M21.8055 10.0415H21V10H12V14H17.6515C17.2571 15.1082 16.5467 16.0766 15.608 16.7855L15.6095 16.785L18.7045 19.404C18.4855 19.6025 22 17 22 12C22 11.3295 21.931 10.675 21.8055 10.0415Z"
                fill="#1976D2" />
            </svg>
          </button>

          <!-- 苹果登录 -->
          <button type="button"
            class="p-2.5 rounded-full hover:bg-gray-100 active:bg-gray-200 transition-all duration-200 transform hover:scale-110 group">
            <svg class="w-7 h-7 text-gray-700 group-hover:text-black transition-colors duration-200" viewBox="0 0 24 24"
              fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M17.05 20.28c-.98.95-2.05.88-3.08.38-1.09-.52-2.08-.53-3.2 0-1.39.68-2.12.53-3.02-.38C3.33 15.85 4.05 8.42 9.36 8.14c1.33.07 2.23.48 3.04.49.82.01 1.67-.35 3.16-.47 1.64-.11 3.06.52 4.14 1.68-3.93 2.21-3.3 7.12.35 8.44zm-4.32-14.6c-.1-2.87 2.5-5.32 5.22-5.48.36 3.24-2.86 5.6-5.22 5.48z" />
            </svg>
          </button>

          <!-- 微信登录 -->
          <button type="button"
            class="p-2.5 rounded-full hover:bg-[#f0fff5] active:bg-[#e6ffe6] transition-all duration-200 transform hover:scale-110 group">
            <svg class="w-7 h-7 text-[#07C160] group-hover:text-[#06ad54] transition-colors duration-200"
              viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.045c.133 0 .243-.11.243-.246 0-.06-.024-.12-.04-.177l-.326-1.232a.49.49 0 0 1 .177-.554C23.72 18.314 24.73 16.6 24.73 14.7c0-3.475-3.454-5.798-7.792-5.842zm-2.672 2.852c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z" />
            </svg>
          </button>
        </div>

        <!-- 注册链接 -->
        <div class="text-center text-sm text-gray-600">
          还没有账号？
          <router-link to="/register" class="text-blue-500 hover:text-blue-600 transition-colors font-medium">
            立即注册
          </router-link>
        </div>
      </form>
    </div>

    <!-- 底部信息 -->
    <div class="mt-12 text-center text-sm text-gray-500">
      <p>登录即表示您同意我们的</p>
      <div class="mt-1 space-x-2">
        <a href="#" class="text-gray-600 hover:text-gray-800 transition-colors">服务条款</a>
        <span>和</span>
        <a href="#" class="text-gray-600 hover:text-gray-800 transition-colors">隐私政策</a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/useUserStore'
import { View, Hide } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const loading = ref(false)

// 初始化表单数据
const loginForm = reactive({
  account: '',
  password: '',
  remember: false
})

// 在组件挂载时检查URL参数
onMounted(() => {
  const usernameFromRegister = route.query.username as string
  if (usernameFromRegister) {
    loginForm.account = usernameFromRegister
    // 自动验证账号
    validateAccount()
  }
})

const errors = reactive({
  account: '',
  password: ''
})

const showPassword = ref(false)

// 验证账号
const validateAccount = () => {
  if (!loginForm.account) {
    errors.account = '请输入用户名或邮箱'
  } else if (loginForm.account.includes('@')) {
    // 验证邮箱格式
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(loginForm.account)) {
      errors.account = '请输入有效的邮箱地址'
    } else {
      errors.account = ''
    }
  } else {
    // 验证用户名格式
    if (loginForm.account.length < 4) {
      errors.account = '用户名不能少于4个字符'
    } else if (loginForm.account.length > 20) {
      errors.account = '用户名不能超过20个字符'
    } else {
      errors.account = ''
    }
  }
}

// 验证密码
const validatePassword = () => {
  if (!loginForm.password) {
    errors.password = '请输入密码'
  } else if (loginForm.password.length < 6) {
    errors.password = '密码不能少于6个字符'
  } else if (loginForm.password.length > 20) {
    errors.password = '密码不能超过20个字符'
  } else {
    errors.password = ''
  }
}

// 表单是否有效
const isFormValid = computed(() => {
  return (
    loginForm.account &&
    loginForm.password &&
    !errors.account &&
    !errors.password
  )
})

// 处理表单提交
const handleSubmit = async () => {
  // 提交前进行验证
  validateAccount()
  validatePassword()

  if (!isFormValid.value) {
    return
  }

  try {
    loading.value = true
    await userStore.login({
      username: loginForm.account,
      password: loginForm.password
    })
    ElMessage.success('登录成功')
    router.push('/')
  } catch (error: any) {
    ElMessage.error(error.message || '登录不行')
  } finally {
    loading.value = false
  }
}
</script>